<template>
  <div id="app">
   <p>{{count}}</p>
   <!-- v-on 基本用法就是 <标签名 v-on:事件名(比如点击click,或者sumbit事件什么都)="data里面的变量名"></标签名> -->
   <button v-on:click="count++">+1</button>
   <!-- v-on 函数基本用法就是 <标签名 v-on:事件名(比如点击click,或者sumbit事件什么都)="methods里面的函数"></标签名> -->
  <button v-on:click="one">+5</button>
   <!-- v-on 函数(10)基本用法就是 <标签名 v-on:事件名(比如点击click,或者sumbit事件什么都)="methods里面的函数(10){(10)的意识就是将10付给下面two()函数里面的val}"></标签名> -->
  <button v-on:click="two(10)">函数加括号</button>
  <!-- v-on简写v-on 直接写成@ -->
  <button @click="three(100)">简写</button>
  
  </div>
   
  </template>
  
  <script>
  
  
  export default {
   data(){
    return{
     count:1
    }
   },
   methods:{
  one(){
    //在函数里面访问data定义的变量一定要加this值
    this.count+=5
  },
  two(val){
  this.count+=val
  },
  three(box){
    this.count+=box
  }
   }
    }
  
  </script>
  
  <style>
  
  </style>
  